<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表达式小结</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      let data = 'abc一年中和一生中的秋天，时光很短暂，但是更加晴朗而缺少变化。';
      let data2 = {
        num: 200
      }
      function test(){
        return <div>abc</div>
      }

      //声明虚拟 DOM 对象
      let vdom = <div>
        {/* 注释的写法 */}
        {/*JS 字面量值 usonb */}
          <div>{undefined}</div>
          <div>{'iwantyou'}</div>
          <div>{Symbol()}</div>
          {/* JSX 标签中不能设置对象 */}
          {/*<div>{{a: 100, b: 200}}</div> */}
          <div>{null}</div>
          <div>{5211314}</div>
          <div>{0o777}</div>
          <div>{true}</div>
          <div>{false}</div>
          <div>{React.createElement('span', null, '虚拟DOM')}</div>
          <div><span>虚拟 DOM</span></div>

        {/** 表达式  变量, 对象属性, 函数调用, 逻辑表达式  */}
          <div>{data}</div>
          <div>{data2.num}</div>
          <div>{data.toUpperCase()}</div>
          <div>{test()}</div>
        </div>;
        
      ReactDOM.render(vdom, document.querySelector('#root'))
    </script>
  </body>
</html>
